<template>
  <div id="love-book-list">
    <div class="img-bg">
      <img class="bg" src="@/assets/book/book_bg.jpg" alt="" />
    </div>
    <div class="search" ref="search">
      <div class="column">
        <div class="left">书名：</div>
        <div class="right">
          <el-input
            v-model="searchObj.bookName"
            placeholder="请输入书名"
          ></el-input>
        </div>
      </div>
      <div class="column">
        <div class="left">作者：</div>
        <div class="right">
          <el-input
            v-model="searchObj.bookAuthor"
            placeholder="请输入作者"
          ></el-input>
        </div>
      </div>
      <div class="column">
        <div class="left">拥有者：</div>
        <div class="right">
          <el-select
            v-model="searchObj.bookUserId"
            filterable
            placeholder="请选择拥有者"
          >
            <el-option
              v-for="item in yonghuArr"
              :key="item.id"
              :label="item.username"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="column">
        <div class="left">大类：</div>
        <div class="right">
          <el-select
            v-model="searchObj.bookBigId"
            filterable
            placeholder="请选择大类"
            @change="bigChange"
          >
            <el-option
              v-for="info in classBigList"
              :key="info.id"
              :label="info.name"
              :value="info.id"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="column">
        <div class="left">小类：</div>
        <div class="right">
          <el-select
            v-model="searchObj.bookSmallId"
            filterable
            placeholder="请选择小类"
          >
            <el-option
              v-for="info in classSmallList"
              :key="info.id"
              :label="info.smallName"
              :value="info.id"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="column column-opacity" v-for="j in disCount"></div>
    </div>
    <!-- <div class="line"></div> -->
    <div class="btn-div">
      <el-button type="primary" @click="search()">搜索</el-button>
    </div>
    <div class="line"></div>
    <div class="content">
      <template>
        <el-table
          v-loading="loading"
          :data="tableData"
          border
          style="width: 100%"
          :row-class-name="tableRowClassName"
          max-height="600"
        >
          <el-table-column label="书名">
            <template slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                :content="scope.row.bookName"
                placement="top"
              >
                <div class="two-row">{{ scope.row.bookName  }}</div>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="bookAuthor" label="作者" width="120">
          </el-table-column>
          <el-table-column prop="bookBigName" label="大类" width="90">
          </el-table-column>
          <el-table-column prop="bookSmallName" label="小类" width="90">
          </el-table-column>
          <el-table-column label="链接" width="90">
            <template slot-scope="scope">
              <div v-html="getUrlBook(scope.row)"></div>
            </template>
          </el-table-column>
          </el-table-column> -->
          <el-table-column label="简介">
            <template slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                :content="scope.row.bookIntroduction"
                placement="top"
              >
                <div class="two-row">{{ scope.row.bookIntroduction }}</div>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="bookPublisher" label="出版社" width="180">
          </el-table-column>
          <el-table-column prop="bookPrice" label="价格" width="60">
          </el-table-column>
          <el-table-column label="出版时间" width="110">
            <template slot-scope="scope">
              {{ getSplit(scope.row.bookPublishTime) }}
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="入籍时间" width="110">
            <template slot-scope="scope">
              <div>
                {{ getSplit(scope.row.createTime) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                v-if="!scope.row.borrowId"
                @click="borrowBook(scope.row)"
                type="text"
                size="small"
                >借阅</el-button
              >
              <el-button
                v-else
                @click="returnBook(scope.row)"
                type="text"
                size="small"
                >还书</el-button
              >
              <el-button type="text" size="small" @click="del(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <div class="footer" v-if="tableData.length">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.pageNum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="this.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <BorrowUser ref="borrowusers" @getBookList="getBookList"></BorrowUser>
  </div>
</template>
<script>
import BorrowUser from "@/views/club/book/components/borrowUser";
import {
  getBookList,
  delBook,
  returnBook,
  getBookBigClassList,
  getBookSmallClassList,
} from "@/api/book";
import { getYonghu } from "@/api/api";
export default {
  components: { BorrowUser },
  data() {
    return {
      loading: false,
      gridCount: 5,
      disCount: 0,
      tableData: [],
      currentPage: 0,
      pageSize: 10,
      pageNum: 1,
      total: 0,
      yonghuArr: [],
      searchObj: {
        bookName: "",
        bookAuthor: "",
        bookUserId: "",
        bookBigId: "",
        bookSmallId: "",
      },
      classBigList: [],
      classSmallList: [],
    };
  },
  mounted() {
    this.getYonghu();
    this.getBookList();
    this.getClassArr();
    let width = this.$refs.search.clientWidth;
    let count = Math.floor(width / 300);
    console.log(count);
    let disCount = this.gridCount % count;
    this.disCount = disCount == 0 || count - disCount;
  },
  methods: {
    getUrlBook(row) {
      let image = row.bookImage;
      let url = row.bookUrl;
      if (image) {
        return `<a class="book-url" target="_blank" href='${url}'><img src='${image}' style="width:80px"/></a>`;
      }
      let name = "";
      if (url.includes(".taobao.com")) {
        name = "淘宝链接";
      }
      if (url.includes(".tmall.com")) {
        name = "天猫链接";
      }
      if (url.includes(".jd.com")) {
        name = "京东链接";
      }
      if (url.includes(".dangdang.com")) {
        name = "当当链接";
      }
      if (!url.indexOf("http://") || !url.includes("https://")) {
        name = "无效链接";
      }
      return `<a class="book-url" target="_blank" href='${url}'>${name}</a>`;
    },
    search() {
      this.getBookList("search");
    },
    bigChange(e) {
      console.log(e);
      getBookSmallClassList({ bigClassId: e }).then((res) => {
        this.classSmallList = res.data;
        this.searchObj.bookSmallId = "";
        this.classSmallList.splice(0, 0, {
          id: null,
          smallName: "全部",
        });
      });
    },
    getClassArr() {
      getBookBigClassList().then((res) => {
        this.classBigList = res.data;
        this.classBigList.splice(0, 0, {
          id: null,
          name: "全部",
        });
      });
    },
    getYonghu() {
      getYonghu().then((res) => {
        this.yonghuArr = res;
        this.yonghuArr.splice(0, 0, {
          id: null,
          username: "全部",
        });
      });
    },
    del(row) {
      this.$confirm("确认删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          row["bookId"] = row.id;
          delBook(row).then((res) => {
            if (res.code > 0) {
              this.$message.success(res.msg);
            } else {
              this.$message.error(res.msg);
            }
            this.getBookList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    returnBook(row) {
      this.$confirm("确认还书, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          row["bookId"] = row.id;
          returnBook(row).then((res) => {
            if (res.code > 0) {
              this.$message.success(res.msg);
            } else {
              this.$message.error(res.msg);
            }
            this.getBookList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    borrowBook(row) {
      this.$refs.borrowusers.$emit("show", row);

      console.log(row);
    },
    getSplit(time) {
      if (time) {
        return time.split(" ")[0];
      }
      return "";
    },
    getBookList(type) {
      this.tableData = [];
      this.loading = true;
      let searchObj = {};
      if (type === "search") {
        searchObj = { ...this.searchObj };
      }
      searchObj["pageSize"] = this.pageSize;
      searchObj["pageNum"] = this.pageNum;
      getBookList(searchObj).then((res) => {
        setTimeout(() => {
          this.loading = false;
        }, 1000);
        this.tableData = res.list || [];
        this.total = res.total;
      });
    },
    tableRowClassName({ row, rowIndex }) {
      // if (rowIndex % 3 == 1) {
      //   return "warning-row";
      // } else if (rowIndex % 3 == 2) {
      //   return "success-row";
      // }
      // return "";
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getBookList();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getBookList();
      console.log(`当前页: ${val}`);
    },
  },
};
</script>
<style lang="stylus">
#love-book-list {
  .book-url {
    color: #771caa;
    text-decoration: underline;
  }

  .search {
    .el-input, .el-select {
      height: 30px;
      line-height: 30px;
      width: 100%;

      .el-input__inner, .el-input__icon {
        height: 30px;
        line-height: 30px;
      }
    }
  }

  .btn-div {
    .el-button {
      // width: 120px;
      // height: 40px;
      // line-height 40px
      // display flex
      // align-items center
      padding: 10px 50px;

      span {
        letter-spacing: 4px;
      }
    }
  }

  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

  .content {
    .el-table--scrollable-x .el-table__body-wrapper {
      &::-webkit-scrollbar {
        width: 1px;
        // height 10px
      }

      &::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.3);
        border-radius: 5px;
      }

      &::-webkit-scrollbar-track-piece {
        // background: transparent;
      }
    }
  }
}
</style>
<style lang="stylus" scoped>
#love-book-list {
  width: 100%;
  height: 100%;
  position: absolute;

  .img-bg {
    z-index: -1;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;

    .bg {
      width: 100%;
      height: 100%;
      opacity: 0.2;
    }
  }

  .footer {
    padding: 0 20px;
    display: flex;
    justify-content: flex-end;
  }

  .btn-div {
    margin: 0 20px;
    display: flex;
    justify-content: flex-end;
  }

  .content {
    padding: 20px;

    .two-row{
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }

  .line {
    height: 2px;
    border-bottom: 1px rgba(0, 0, 0, 0.2) solid;
    margin: 0 20px;
  }

  .search {
    min-width: 666px;
    background-color: rgba(155, 155, 155, 0.1);
    position: absolute;
    display: flex;
    justify-content: space-around;
    flex-flow: row wrap;
    padding-top: 20px;
    margin: 20px;
    border-radius: 8px;
    position: relative;

    * {
      font-size: 14px;
    }

    .column {
      box-sizing: border-box;
      width: 300px;
      height: 40px;
      // border: 1px solid red;
      display: flex;
      margin-bottom: 20px;

      .left {
        flex-basis: 80px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }

      .right {
        flex: 1;
        display: flex;
        align-items: center;
      }
    }

    .column-opacity {
      opacity: 0;
    }
  }
}
</style>